<html>
<head>
    <meta charset="utf-8">
<title>数据可视化实践</title>
</head>
<style>
#main{
width:1366px;
height:646px;
background:#104E8B;
}
#main  .aimages{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}

#main .aimages img{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}


#button{
width:200px;
display:flex;
position:absolute;
left:20px;
bottom:10px;
z-index:10;
}

#button span{
display:block;
width:16px;
height:16px;
border:1px solid white;
border-radius:50%;
}

#main a{
text-decoration:none;
font-size:30px;
color:gold;
position:absolute;
top:50%;
}

#main a:nth-of-type(1){
left:10px;
}

#main a:nth-of-type(2){
right:10px;
}

.active{
background:red;
}
</style>
<body style="margin:0px;">
<div id="main">
<div id="images">
<a class="aimages" href="https://m.qlchat.com/wechat/page/live/2000008341267717" target="blank" ><img src="./images/QianLiao.png"></a>
<a class="aimages" href="https://www.douyin.com/user/MS4wLjABAAAA6XJt5TuOABxnJtqqdvnOR7uh01CbQHSsxbME5X_nAvs" target="blank" ><img src="./images/Titok.png"></a>
<a class="aimages" href="./Enjoyment/Basic/Sunburst.html" target="blank" ><img src="./images/Sunburst.png" ></a>
<a class="aimages" href="./Enjoyment/Basic/Graph.html" target="blank" ><img src="./images/Graph.png" ></a>
<a class="aimages" href="./Enjoyment/Basic/Tree.html" target="blank" ><img src="./images/Tree.png" ></a>
</div>
<div id="button">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a class="arrow" href="javascript:void(0)">&lt</a>
<a class="arrow" href="javascript:void(0)">&gt</a>
</div>
<script src="jquery-3.6.4.js"></script>
<script>

var index=0;
$(".arrow:first").click(function(){Pre_Image();});
$(".arrow:last").click(function(){Next_Image();});
$("#main").mouseover(function(){clearInterval(id);});
$("#main").mouseout(function(){AutoPlay();});

function Pre_Image(){
index--;
if(index<0){
index=4;
}
AddStyle();
}

function Next_Image(){
index++;
if(index>4){
index=0;
}
AddStyle();
}

function AddStyle(){
$(".aimages").eq(index).fadeIn();
$(".aimages").eq(index).siblings().fadeOut();
$("span").eq(index).addClass("active");
$("span").eq(index).siblings().removeClass("active");
}
var id;
AutoPlay();
function AutoPlay(){
id=setInterval(function(){
 Next_Image();
},3000);
}

</script>
</body>
</html>